<template>
    <!-- <el-card style="width:100%;"> -->

    <div style="text-align: left; border-left: #2984f8 5px solid; padding: 0 5px;">团队管理</div>

    <!-- <span>团队管理</span> -->
    <div class="tabs">
        <el-tabs v-model="activeName" style="margin-top: 20px;">
            <el-tab-pane v-for="item in activeType" :label="item.name" :name="item.value"></el-tab-pane>
        </el-tabs>
        <div>
            <el-button type="primary" class="teamBtn" @click="toAddTeamForm()">新增医生团队</el-button>
            <el-button type="primary" class="teamBtn" @click="applyRef.open = true">申请加入团队</el-button>
        </div>
    </div>
    <el-form :model="selectValue">
        <div class="selectInput">
            <!-- <label for="" style="margin-top: 7px;font-size: 15px;margin-right: 10px;">所属机构</label> -->
            <el-select v-model="selectValue.organizationId" placeholder="请选择所属机构" size="default"
                style="width: 200px;margin-right: 20px;" @change="accTeam" clearable>
                <template v-for="item in organization" :key="item._id">
                    <el-option :label="item.name" :value="item._id" />
                </template>
            </el-select>

            <div class="searchBox">
                <input placeholder="请输入团队名称"
                    style="width: 300px;height: 30px;border: none;outline: none;padding-left: 10px;"
                    v-model="selectValue.name" @input="accTeam">
                </input>

                <el-icon @click="onAccTeam()">
                    <Search />
                </el-icon>
            </div>
        </div>
    </el-form>

    <el-table :data="teamData.rows"
        :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e', textAlign: 'center' }"
        style="font-size: 13px;">

        <!-- <el-table-column type="selection" width="55" /> -->

        <el-table-column prop="_id" label="编号" align="center" min-width="120" />
        <el-table-column prop="" label="头像" align="center">
            <template #default="{ row }">
                <el-image :src="row?.avatar" style="width: 30px;">
                </el-image>
            </template>
        </el-table-column>

        <el-table-column prop="name" label="团队名称" align="center" min-width="100" />
        <el-table-column prop="leaderId.name" label="团队长" align="center" />

        <el-table-column label="团队标签" width="200px" align="center">
            <template #default="{ row }">
                <div style="display: flex;">
                    <el-tag v-for="item in row?.tagIds" round>{{ item.name }}</el-tag>
                </div>
            </template>

        </el-table-column>

        <el-table-column prop="organizationId.name" label="所属机构" align="center" min-width="150" />
        <el-table-column prop="signNumber" label="签约人数" align="center" />
        <el-table-column prop="rate" label="评分" align="center" />

        <!-- <el-table-column prop="state" label="状态" align="center">
            <template #default="{ row }">
                <el-switch v-model="row.state" inline-prompt :active-value="1" :inactive-value="0" active-text="启用"
                    inactive-text="关闭" />
            </template>
        </el-table-column> -->

        <el-table-column prop="" label="操作" width="180" align="center">
            <template #default="{ row }">
                <div>
                    <router-link :to="`/data/team/detail/${row._id}`">
                        <el-button link type="primary">查看详情</el-button>
                    </router-link>
                    <el-button link type="danger" @click="accDelete({ _id: row._id })">解散队伍</el-button>
                </div>
            </template>
        </el-table-column>

    </el-table>

    <!-- 分页 -->
    <div v-if="pageData" class="flex-end" style="margin-top: 22px;">
        <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize" :total="total"
            :page-sizes="[2, 3, 5, 10, 20]" background layout="total, sizes, prev, pager, next, jumper" />
    </div>

    <!-- </el-card> -->
    <!-- <TeamDetail :teamMsg="teamMsg"></TeamDetail>
   <AddTeamForm :teamData="teamData" :organization="organization"></AddTeamForm>
    <DoctorDetail :teamMsg="teamMsg"></DoctorDetail> -->
    <!-- <AddTeamForm :teamData="teamData"></AddTeamForm> -->
    <SearchDialog :teamData="teamData" ref="applyRef" @onAccTeam="onAccTeam()"></SearchDialog>

    <!-- 编辑团队信息弹窗 -->
    <EditorTeamMsg ref="editorRef" :teamMsg="{ teamMsg: currentEditTeam }" @refresh="handleRefresh" />
</template>

<script setup>
import { deleteTeam, getTeamDetailApi, searchOrganizationApi, searchTeam } from '@/api/team';
import { onMounted, provide, ref, useTemplateRef, watch } from 'vue';
import SearchDialog from './SearchDialog.vue';
import TeamDetail from './TeamDetail.vue';
import AddTeamForm from './TeamAdd.vue';
import EditorTeamMsg from './EditorTeamMsg.vue';
import { useRoute, useRouter } from 'vue-router';
import { useFindData } from '@/composables/findData';
import { useGlobalStore } from '@/store/global';
// import DoctorDetail from './DoctorDetail.vue';

const pageData = ref({
    currentPage: 1,
    pageSize: 2
});

const total = ref(0);

watch(pageData, () => {

    // console.log(pageData.value);

    accTeam();
}, { deep: true });

const userStore = useGlobalStore();

// 搜索默认值
const selectValue = ref({})
// 机构默认值
const organization = ref([])

const { teamMsg, accTeamDetail } = useFindData();



provide('teamMsg', teamMsg.value);

const applyRef = useTemplateRef('applyRef')
const editorRef = useTemplateRef('editorRef')

const router = useRouter()

// 编辑团队相关
const currentEditTeam = ref({})

const toAddTeamForm = () => {
    router.replace('/data/team/add')
}



// 团队类型：1-我管理的团队 2-我加入的团队
const activeName = ref(1)

const activeType = ref([
    {
        name: '我管理的团队',
        value: 1
    },
    {
        name: '我加入的团队',
        value: 2
    }
])

// 团队
const teamData = ref({
    rows: [],
    total: 0
})


watch(activeName, () => {
    accTeam()
})

// // 团队详情
// async function accTeamDetail(uid) {
//     const res = await getTeamDetailApi({
//         _id: uid,
//         doctorId: '656f1517aa8386d1a3f2cf77',
//         type: 2
//     })
//     if (res.code == 200) {
//         teamMsg.value = res.data
//         // teamMsg.value.tagIds = res.data.tagIds
//         // teamMsg.value.organizationId = res.data.organizationId
//         // teamMsg.value.memberIds = res.data.memberIds

//     }
// }

onMounted(() => {
    accTeam()
    searchOrganization()
})


// 解散队伍
function accDelete(uid) {
    ElMessageBox.confirm(
        '确定要删除分组吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 点击【确定】按钮
        deleteTeam(uid)
        // deleteTeam(uid)
        // if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        // }
        accTeam()

    }).catch(() => {
        // 点击【取消】按钮
    })

}





//自动渲染查询管理的团队
async function accTeam() {
    console.log(111);

    const res = await searchTeam({
        // 需要医生id
        doctorId: userStore.adminInfo._id,
        // doctorId: '686f2fdd0b991e21ee16fc06',
        ...pageData.value,
        type: activeName.value,
        ...selectValue.value
    })
    if (res.code == 200) {
        teamData.value.rows = res.data.rows
        total.value = res.data.total
    }
}

//点击查询渲染管理的团队
async function onAccTeam() {
    // console.log(111);
    console.log(selectValue.value);

    {
        const res = await searchTeam({
            // 需要医生id
            // // type: activeName.value
            ...selectValue.value,
            ...applyRef.value.teamName
        }

        )
        if (res.code == 200) {
            teamData.value.rows = res.data.rows
            teamData.value.total = res.data.total
        }
    }
}

// 查询机构(下拉框)
async function searchOrganization() {
    const res = await searchOrganizationApi()
    if (res.code == 200) {
        organization.value = res.data.rows
    }
}


// 刷新团队列表
function handleRefresh() {
    accTeam()
}


</script>

<style scoped>
.searchBox {
    padding-left: 10px;
    padding-right: 10px;
    width: 376px;
    height: 30px;
    border: 1px solid #DBDEE5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
}

.selectInput {
    float: left;
    display: flex;
    margin-top: 20px;

    margin-bottom: 40px;
}

.tabs {
    display: flex;
    justify-content: space-between;
}

.teamBtn {
    width: 120px;
    height: 40px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-buttons .el-button {
    margin: 0;
}
</style>
